import { Button, Card, Col, Row } from 'antd'
import { useTranslations } from 'next-intl'
import React from 'react'
import styles from './index.module.less'

const GiftPage: React.FC = () => {
  const t = useTranslations()

  const gifts = [
    { id: 1, name: 'rose', price: 10 },
    { id: 2, name: 'chocolate', price: 50 },
    { id: 3, name: 'diamond', price: 100 },
  ]

  return (
    <div className={styles.container}>
      <h1>{t('gift.title')}</h1>
      <Row gutter={[16, 16]}>
        {gifts.map((gift) => (
          <Col key={gift.id} span={8}>
            <Card
              title={t(`gift.${gift.name}`)}
              extra={
                <span>
                  {gift.price} {t('gift.coin')}
                </span>
              }
            >
              <Button type="primary" block>
                {t('gift.send')}
              </Button>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  )
}

export default GiftPage
